<template>
	<view class="wrap">
		<u-calendar v-model="isShowCalendar" :mode="mode" @change="changeCalendar"></u-calendar>
		<u-popup mode="bottom" v-model="isShowSearch" :closeable="isCloseable" border-radius="20">
			<view class="search-content">
				<u-form :model="model" ref="uForm">
					<u-form-item label="名称" prop="typeName">
						<u-input placeholder="请输入要查询的货品名称" v-model="model.typeName" type="text">
						</u-input>
					</u-form-item>
					<u-form-item label="仓单" prop="initArea">
						<u-input placeholder="请输入要查询的货品仓单号" v-model="model.initArea" type="text">
						</u-input>
					</u-form-item>
				</u-form>
				<view class="search-btn">
					<u-button type="primary" shape="circle" size="default" @click="queryGetList">查询</u-button>
				</view>
			</view>
		</u-popup>
		<view class="u-tabs-box">
			<u-tabs-swiper ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view v-for="(item,index) in priceList" :key=index class="order">
							<view class="item">
								<view class="left">
									<view class="sum">{{item.typeName}}</view>
									<view class="type">{{item.sumPrice?'¥'+item.sumPrice+'元':'未录入'}}</view>
								</view>
								<view class="mid">
									<view class="title u-line-1">{{item.initArea}}</view>
									<view class="type">重量 : {{item.goodsWeight+item.inventoryPlace}}</view>
									<view class="type">单价 : {{item.price?'¥'+item.price+'元/'+item.inventoryPlace:'未录入'}}
									</view>
									<view class="delivery-time">日期 : {{item.createTime}}</view>
								</view>
								<view class="right">
									<view v-if="item.payStatus==='0'" class="price">应收</view>
									<view v-if="item.payStatus==='1'" class="price">应付</view>
									<view v-if="item.payStatus==='2'" class="price">已收</view>
									<view v-if="item.payStatus==='3'" class="price">已付</view>
									<view class="bottom">
										<navigator class="evaluate btn" :url="'./write?item='+JSON.stringify(item)"
											open-type="navigate">录 入
										</navigator>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore v-show="!isPriceEmpty" :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
						<u-empty v-show="isPriceEmpty" mode="list" margin-top="400"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view v-for="(item,index) in handingfeeList" :key=index class="order">
							<view class="item">
								<view class="left">
									<view class="sum">{{item.typeName}}</view>
									<view class="type">￥{{item.sumHandingfee}}元</view>
								</view>
								<view class="mid">
									<view class="title u-line-1">{{item.initArea}}</view>
									<view class="type">重量 : {{item.goodsWeight+item.inventoryPlace}}</view>
									<view class="type">标准 : {{item.weightPrice}}元/{{item.inventoryPlace}}</view>
									<view class="delivery-time">日期 : {{item.createTime}}</view>
								</view>
								<view class="right">
									<view class="price">手续费</view>
								</view>
							</view>
						</view>
						<u-loadmore v-show="!isHandingfeeEmpty" :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
						<u-empty v-show="isHandingfeeEmpty" mode="list" margin-top="400"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="page-box">
						<view v-for="(item,index) in expenseList" :key=index class="order">
							<view class="item">
								<view class="left">
									<view class="sum">{{item.typeName}}</view>
									<view class="type">￥{{item.sumExpenseprice}}元</view>
								</view>
								<view class="mid">
									<view class="title u-line-1">{{item.initArea}}</view>
									<view class="type">总价 : ￥{{item.sumPrice}}元</view>
									<view class="type">费率 : {{item.expensePrice*100}}%</view>
									<view class="delivery-time">日期 : {{item.createTime}}</view>
								</view>
								<view class="right">
									<view class="price">服务费</view>
								</view>
							</view>
						</view>
						<u-loadmore v-show="!isExpenseEmpty" :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
						<u-empty v-show="isExpenseEmpty" mode="list" margin-top="400"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="page-box">
						<view v-show="isOtherEmpty">
							<view class="centre">
								<image class="none" src="https://cdn.uviewui.com/uview/template/taobao-order.png"
									mode=""></image>
								<view class="explain">
									尚未录入其他仓库数据
									<view class="tips">该页面数据仅供参考</view>
								</view>
								<view class="btn" @click="toRecord">点我记账</view>
							</view>
						</view>
						<view v-for="(item,index) in otherList" :key=index class="order">
							<view class="item">
								<view class="left">
									<view class="sum">{{item.goodsName}}</view>
									<view class="type">￥{{item.sumprice}}元</view>
								</view>
								<view class="mid">
									<view class="title u-line-1">{{item.initArea}}</view>
									<view class="type">重量 : {{item.weight}}{{item.inventoryPlace}}</view>
									<view class="type">单价 : ￥{{item.price}}元/{{item.inventoryPlace}}</view>
									<view class="delivery-time">时间 : {{item.createTime}}</view>
								</view>
								<view class="rightClose">
									<u-icon name="close" class="delete" @click="deleteList(item)"></u-icon>
									<view v-if="item.payStatus==='0'" class="price">{{item.goodScouse+' 应收'}}</view>
									<view v-if="item.payStatus==='1'" class="price">{{item.goodScouse+' 应付'}}</view>
									<view v-if="item.payStatus==='2'" class="price">{{item.goodScouse+' 已收'}}</view>
									<view v-if="item.payStatus==='3'" class="price">{{item.goodScouse+' 已付'}}</view>
									<view class="bottom">
										<navigator class="evaluate btn"
											:url="'../record/update?item='+JSON.stringify(item)" open-type="navigate">修
											改
										</navigator>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore v-show="!isOtherEmpty" :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
						<!-- <u-empty v-show="isOtherEmpty" mode="list" margin-top="400"></u-empty> -->
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-icon name="coupon-fill" class="fix-btn-calendar" @click="openCalendar" size="80"></u-icon>
		<u-icon name="search" class="fix-btn-search" @click="openSearch" size="80"></u-icon>
	</view>
</template>

<script>
	import {
		getPrice,
		getHandingfee,
		getExpense,
		getOtherList
	} from '../../api/getlist.js'

	import {
		deleteOtherList
	} from '../../api/updatelist.js'


	export default {
		data() {
			return {
				model: {
					typeName: '',
					initArea: ''
				},
				list: [{
						name: '收付费',
						count: 0
					},
					{
						name: '手续费',
						count: 0
					},
					{
						name: '服务费',
						count: 0
					},
					{
						name: '记账',
						count: 0
					}
				],
				isShowBtn: false,
				isCloseable: true,
				isShowCalendar: false,
				isShowSearch: false,
				isPriceEmpty: true,
				isHandingfeeEmpty: true,
				isExpenseEmpty: true,
				isOtherEmpty: true,
				mode: 'range',
				current: 0,
				curNow: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loading', 'loadmore', 'nomore'],
				priceList: [],
				handingfeeList: [],
				expenseList: [],
				otherList: [],
				queryParams: {}
			};
		},
		onShow() {
			this.getSwiperCurrent()
			this.getlist()
		},
		onReady() {
			this.getAllList()
		},
		onPullDownRefresh() {
			this.getAllList()
			uni.stopPullDownRefresh()
		},
		methods: {
			toRecord() {
				uni.switchTab({
					url: '../record/index'
				})
			},
			deleteList(item) {
				let deleteId = [item.id]
				uni.showModal({
					title: '提示',
					content: '确定删除吗',
					success: (res) => {
						if (res.confirm) {
							deleteOtherList(deleteId).then(res => {
								if (res.code === 200) {
									this.$u.toast('删除成功');
									this.getlist()
								} else
									this.$u.toast('删除失败');
							})

						}
					}
				})
			},
			getSwiperCurrent() {
				this.swiperCurrent = getApp().globalData.swiperCurrent
				getApp().globalData.swiperCurrent = 0
			},
			getlist() {
				if (uni.getStorageSync('token')) {
					if (this.swiperCurrent === 0) {
						getPrice(this.queryParams).then(res => {
							this.priceList = res.rows ? res.rows : {},
								this.isPriceEmpty = Object.keys(this.priceList).length === 0 ? true : false
							this.list[0].count = res.total
						})
					}
					if (this.swiperCurrent === 1) {
						getHandingfee(this.queryParams).then(res => {
							this.handingfeeList = res.rows ? res.rows : {},
								this.isHandingfeeEmpty = Object.keys(this.priceList).length === 0 ? true : false
							this.list[1].count = res.total
						})
					}
					if (this.swiperCurrent === 2) {
						getExpense(this.queryParams).then(res => {
							this.expenseList = res.rows ? res.rows : {},
								this.isExpenseEmpty = Object.keys(this.priceList).length === 0 ? true : false
							this.list[2].count = res.total
						})
					}
					if (this.swiperCurrent === 3) {
						getOtherList(this.queryParams).then(res => {
							this.otherList = res.rows ? res.rows : {},
								this.isOtherEmpty = Object.keys(this.otherList).length === 0 ? true : false
							this.list[3].count = res.total
						})
					}
				}
			},
			getAllList() {
				if (uni.getStorageSync('token')) {
					getPrice(this.queryParams).then(res => {
						this.priceList = res.rows ? res.rows : {},
							this.isPriceEmpty = Object.keys(this.priceList).length === 0 ? true : false
						this.list[0].count = res.total
					})
					getHandingfee().then(res => {
						this.handingfeeList = res.rows ? res.rows : {},
							this.isHandingfeeEmpty = Object.keys(this.priceList).length === 0 ? true : false
						this.list[1].count = res.total
					})
					getExpense().then(res => {
						this.expenseList = res.rows ? res.rows : {},
							this.isExpenseEmpty = Object.keys(this.priceList).length === 0 ? true : false
						this.list[2].count = res.total
					})
					getOtherList(this.queryParams).then(res => {
						this.otherList = res.rows ? res.rows : {},
							this.isOtherEmpty = Object.keys(this.otherList).length === 0 ? true : false
						this.list[3].count = res.total
					})
				}
			},
			reset() {
				this.queryParams = {}
				this.model = {}
			},
			queryGetList() {
				this.isShowSearch = false
				this.model.goodsName = this.model.typeName
				this.queryParams = this.model
				this.getlist()
				this.reset()
			},
			changeCalendar(e) {
				this.queryParams.beginTime = e.startDate
				this.queryParams.endTime = e.endDate
				this.getlist()
				this.reset()
			},
			openSearch() {
				this.isShowSearch = true
			},
			openCalendar() {
				this.isShowCalendar = true
			},
			reachBottom() {

			},
			change(index) {
				this.swiperCurrent = index
				getApp().globalData.swiperCurrent = index
				this.getlist()
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.left {
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			background-color: rgb(95, 148, 224);
			text-align: center;
			justify-content: center;
			font-size: 28rpx;
			color: #ffffff;

			.sum {
				font-weight: 700;
				font-size: 36rpx;
			}

			.type {
				font-size: 24rpx;
			}
		}

		.right {
			color: #5f94e0;
		}

		.rightClose {
			color: #5f94e0;
			text-align: right;
			transform: translateY(-15rpx);

			.delete {
				transform: translateY(-10rpx);
				color: black;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				flex: 2;
				margin-right: 20rpx;
			}

			.mid {
				flex: 3;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
				}

				.delivery-time {
					font-size: 24rpx;
				}
			}

			.right {
				flex: 2;
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid #5f94e0;
				font-size: 26rpx;
				text-align: center;
				color: #5f94e0;
			}

			.evaluate {
				color: #5f94e0;
				border-color: #5f94e0;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		.none {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #f2f2f2;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.fix-btn-calendar {
		position: fixed;
		bottom: 10%;
		right: 5%;
	}

	.fix-btn-search {
		position: fixed;
		bottom: 18%;
		right: 5%;
	}

	.search-content {
		height: 500rpx;
		padding: 100rpx 50rpx;

		.search-btn {
			padding-top: 50rpx;
		}
	}
</style>
